<template>
  <div id="login_app">
    <div class="borderd">
      <div class="form-panel">
        <div class="login-logo"></div>
        <el-form
          status-icon
          class="demo-ruleForm"
          :model="form_data"
          :rules="rules"
        >
          <el-form-item prop="username" class="el-item-hhh">
            <el-input
              type="text"
              autocomplete="off"
              placeholder="请输入您的用户名"
              v-model="form_data.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" class="el-item-hhh">
            <el-input
              type="password"
              autocomplete="off"
              placeholder="请输入相应的密码"
              v-model="form_data.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '../utils/http'
export default {
  data() {
    return {
      //表单对应的数据格式
      form_data: {
        username: "admin",
        password: "admin888",
      },
      rules:{
//表单对应的数据校验
username:[
//{校验的规则，required固定的非空校验，message是错误提示，trigger触发校验的事

{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password:[
{ required: true, message: '请输入用户名', trigger: 'blur' },
]
}
    };
  },
  methods:{
submit(){
    axios.post('/userlogin',this.form_data).then(res=>{
        if(res.code==200){
             localStorage.setItem('loginData',JSON.stringify(res.list))
             
        this.$message({
            type:'success',
            message:res.msg,
        });
       
        this.$router.push('/layout')
        }else{
            this.$message({
            type:'warning',
            message:res.msg,
        });
        }
       console.log(res.list);
    })
}
  }
};
</script>

<style>
#login_app {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to bottom, #ff5a3b, #eb8b7a);
}
#login_app > .borderd {
  width: 900px;
  height: 100vh;
  position: absolute;
  right: 200px;
  background: url("../assets/loginbg.png") no-repeat center center;
  background-size: 750px;
}
.form-panel {
  width: 350px;
  height: 500px;
  position: absolute;
  top: 150px;
  right: 120px;
}
#login_app .login-logo {
  width: 350px;
  height: 100px;
  background: url("../assets/logo1.png");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 30px;
}
.el-form-item__content > button {
  width: 100%;
  border-radius: 20px;
  background-color: #ff5a3b;
  border: none;
}
.el-form-item__content > button:hover {
  background-color: #e43516;
}
.el-input__inner {
  border: none !important;
  border-bottom: 1px #ff5a3b solid !important;
  border-radius: 0;
  background-color: #fff6f5;
}
.demo-ruleForm {
  margin-top: 100px;
}
.el-item-hhh {
  margin-top: 30px;
}
</style>